<template>
  <div>
    <!-- 评论区 -->
    <div class="b-section">
      <!-- 评论头 -->
      <div class="b-t">
        <h3>评论</h3>
        <span>共{{ musicAreasList.total }}评论</span>
      </div>
      <!-- 评论文章 -->
      <div class="ipterea">
        <div class="heads">
          <img src="./image/default_avatar.jpg" alt="" />
        </div>
        <div class="m-cmmipt">
          <div class="u-textwrap">
            <textarea> 评论</textarea>
          </div>
          <!-- 底部表情 -->
          <div class="b-icom">
            <div>
              <i class="b-ci"></i>
              <i class="b-cii"></i>
            </div>
            <div class="b-sa">
              <!-- <h4></h4> -->
              <span>140</span>
              <a href="javascript:;" class="pl">评论</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 评论区 -->
      <div
        class="b-t b-ti"
        
      >
        <h5>精彩评论</h5>
        <!-- <span>共{{ musicAreasList.total }}评论</span> -->
      </div>
      <!-- 评论文章 -->
      <div
        class="ipterea"
        v-for="areasList in musicAreasList.hotComments"
        :key="areasList.commentId"
      >
        <div class="heads">
          <a @click="gouserhome(areasList.user.userId)"><img  v-lazy="areasList.user.avatarUrl" alt="" /></a>
        </div>
        <!-- 右边区域 -->
        <div class="m-cmmipt">
          <!-- 名称 -->
          <div class="u-id">
            <a href="JavaScript:;" @click="gouserhome(areasList.user.userId)">{{ areasList.user.nickname }}</a>
            <!-- <i></i> -->
            <!-- <img :src="areasList.user.vipRights.associator.iconUrl" alt="" /> -->
            ：

            {{ areasList.content }}
            <div class="u-section" v-show="areasList.beReplied.length > 0">
              <a href="JavaScript:;">{{
                areasList.beReplied.length > 0
                  ? areasList.beReplied[0].user.nickname
                  : ""
              }}</a>
              <!-- {{areasList.beReplied[0].content}} -->
              {{
                areasList.beReplied.length > 0
                  ? areasList.beReplied[0].content
                  : ""
              }}
              <!-- {{areasList.beReplied[0].length > 0 ?areasList.beReplied[0].content: ""}} -->
              <!-- {{lied.content}} -->
            </div>
          </div>
          <!-- 文本 -->

          <!-- 底部表情 -->
          <div class="b-icom">
            <span>{{ areasList.timeStr }}</span>
            <div class="b-saii">
              <!-- <h4></h4> -->
              <!-- <i class="b-zan"></i> -->
              <a href="javascript:;" class="b-z">
                <i class="b-zan"></i> ({{ areasList.likedCount }})</a
              >
              <a href="javascript:;" class="b-f">回复</a>
            </div>
          </div>
        </div>
      </div>

      <!-- 最新评论 -->
      <!-- 评论区 -->
      <div class="b-t b-ti">
        <h5 >最新评论</h5>
        <!-- <span>共{{ musicAreasList.total }}评论</span> -->
      </div>

      <!-- 评论文章 -->
      <div
        class="ipterea"
        v-for="areasList in musicAreasList.comments"
        :key="areasList.commentId"
      >
        <div class="heads">
          <a @click="gouserhome(areasList.user.userId)"><img  v-lazy="areasList.user.avatarUrl" alt="" /></a>
        </div>
        <!-- 右边区域 -->
        <div class="m-cmmipt">
          <!-- 名称 -->
          <div class="u-id">
            <a href="JavaScript:;" @click="gouserhome(areasList.user.userId)">{{ areasList.user.nickname }}</a>
            <!-- <i></i> -->
            <!-- <img :src="areasList.user.vipRights.associator.iconUrl" alt="" /> -->
            ：

            {{ areasList.content }}
            <div class="u-section" v-show="areasList.beReplied.length > 0">
              <a href="JavaScript:;">{{
                areasList.beReplied.length > 0
                  ? areasList.beReplied[0].user.nickname
                  : ""
              }}</a>
              <!-- {{areasList.beReplied[0].content}} -->
              {{
                areasList.beReplied.length > 0
                  ? areasList.beReplied[0].content
                  : ""
              }}
              <!-- {{areasList.beReplied[0].length > 0 ?areasList.beReplied[0].content: ""}} -->
              <!-- {{lied.content}} -->
            </div>
          </div>
          <!-- 文本 -->

          <!-- 底部表情 -->
          <div class="b-icom">
            <span>{{ areasList.timeStr }}</span>
            <div class="b-saii">
              <!-- <h4></h4> -->
              <!-- <i class="b-zan"></i> -->
              <a href="javascript:;" class="b-z">
                <i class="b-zan"></i> ({{ areasList.likedCount }})</a
              >
              <a href="javascript:;" class="b-f">回复</a>
            </div>
          </div>
        </div>
      </div>

      <!-- <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination> -->
    </div>
  </div>
</template>

<script>
export default {
  props: ["total", "musicAreasList"],
  methods: {
    gouserhome(id) {
      this.$router.push(`/userhome?id=${id}`);
    },
  },
};
</script>

<style lang="less" scoped>
// 评论区
.b-section {
  width: 640px;
  margin: 30px auto;
  // background-color: blueviolet;
  // height: 500px;
  // 最上边
  .b-t {
    width: 100%;
    height: 30px;
    display: flex;
    margin-top: 20px;
    align-items: center;
    border-bottom: solid rgb(194, 12, 12) 3px;
    span {
      font-size: 13px;
      margin-left: 30px;
    }
  }
  .b-ti {
    border-bottom: solid rgb(207, 207, 207) 1px;
  }
  .ipterea {
    display: flex;
    // margin-top: 20px;
    padding-top: 30px;
    border-top: dotted 1px #000;
    margin-bottom: 30px;
    // background-color: rgb(255, 255, 255);
    .heads {
      background-color: rgb(255, 255, 255);
      img {
        height: 50px;
        width: 50px;
      }
    }
    .m-cmmipt {
      width: 100%;
      margin-left: 10px;
      .u-textwrap {
        textarea {
          display: block;
          height: 50px;
          width: 97%;
          // margin-right: 20px;
          margin: 0;
          padding: 5px 6px 6px;
          border: 1px solid #cdcdcd;
          border-radius: 2px;
          line-height: 19px;
          box-sizing: content-box;
        }
      }
      .b-icom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        .b-ci {
          display: inline-block;
          width: 18px;
          height: 18px;
          background-position: -40px -490px;
          background-image: url("~@/assets/image/icon.png");
        }
        .b-cii {
          margin-left: 10px;
          display: inline-block;
          width: 18px;
          height: 18px;
          background-position: -60px -490px;
          background-image: url("~@/assets/image/icon.png");
        }
        .b-sa {
          width: 90px;
          .pl {
            // padding-top: 10px;
            display: inline-block;
            width: 46px;
            height: 25px;
            background-position: -84px -62px;
            color: #fff;
            text-align: center;
            line-height: 25px;
            margin-left: 10px;
            background-image: url("~@/assets/image/button.png");
          }
        }
      }
    }
  }
}

// 评论列表。
.ipterea {
  .m-cmmipt {
    width: 570px;
    // 左边名字
    .u-id {
      // display: flex;
      a {
        // display: inline-block;
        margin-right: 5px;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
      }
      img {
        width: 32px;
        height: 12px;
      }
      // 评论
      .u-section {
        margin-top: 10px;
        width: 90%;
        height: 100%;
        background-color: rgb(244, 244, 244);
        border: solid #cdcdcd 1px;
      }
    }
    .b-icom {
      .b-saii {
        .b-z {
          display: inline-block;
          margin-right: 10px;
          .b-zan {
            display: inline-block;
            width: 15px;
            height: 14px;
            background-position: -150px 0;
            background-image: url("~@/assets/image/icon2.png");
          }
        }
        .b-f {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
